<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-button type="primary" size="small" @click="showPop('add')">
        新建模板
      </el-button>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
                prop="templateName"
                label="模版名称"
                align="center"
                min-width="150">
        </el-table-column>
        <el-table-column
          prop="isEnable"
          label="状态"
          align="center"
          min-width="100">
          <template slot-scope="scope">
              {{scope.row.isEnable == 1 ? "启用" : '禁用'}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
              <el-button type="text" @click="toTplInfo(scope.row)">查看</el-button>
              <el-button type="text" @click="changeState(scope.row)">{{scope.row.isEnable == 1 ? '禁用' : '启用'}}</el-button>
              <el-button type="text" @click="showPop('copy',scope.row)">复制</el-button>
              <el-button type="text" @click="showPop('edit',scope.row)">编辑</el-button>
              <el-button type="text" @click="toTPItem(scope.row)">编辑项目</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新建投票模板--->
    <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :beforeClose="handleClose"
            :visible.sync="dialogVisible"
            width="400px">
          <el-form :model="addForm" size="mini" label-width="120px" :rules="rules" ref="addForm">
            <el-form-item label="模板名称：" prop="templateName">
              <el-input v-model="addForm.templateName" ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
    import { getTemplateList,changeTemplate,addTemplate,templateCopy} from '@/api/partner'
    import {supplierListApi,commonSupplierContactList} from '@/api/company'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultAddForm = {
      templateName:'',
      templateId:0,
    };
    export default {
        name: "index",
        data(){
            return{
              roles:store.getters.roles ? store.getters.roles : [],
              list:[],
              loading:false,
              title:'',
              dialogVisible:false,
              rules:{
                templateName:[{required: true, trigger: 'blur' ,message: '请输入模版名称'}],
              },
              addForm:JSON.parse(JSON.stringify(defaultAddForm)),
              btnLoading:false,
              type:''
            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),

        },
        created() {
            this.getList();
        },
        filters: {
          fifType(val) {
               if(val == 'login' ){
                 return '登录'
               }else if(val == 'download'){
                 return '下载'
               }else if(val == 'delete'){
                 return '删除'
               }
            },
        },
        methods:{
            //复制模版
            copy(item){

            },
            toTplInfo(item){
                this.$router.push({name:'templateView',query:{templateId:item.templateId,type:'preview'}});
            },
          toTPItem(item){
            console.log(item)
            this.$router.push({name:'templateItem',query:{templateName:item.templateName,templateId:item.templateId}})
          },
          showPop(type,item){
            this.title = type == 'add' ? '新建模版' : '编辑模版';
            if(type == 'add'){
                this.title = '新建模版';
            }else if(type == 'edit'){
                this.title = '编辑模版';
            }else if(type == 'copy'){
                this.title = '复制模版';
            }
            this.dialogVisible = true;
            if(type == 'edit'){
              this.addForm = JSON.parse(JSON.stringify(item));
            }else if(type == 'add'){
              this.addForm = JSON.parse(JSON.stringify(defaultAddForm));
            }else if(type == 'copy'){
                this.addForm.templateId = item.templateId;
                this.addForm.templateName = '';
            }

            this.type = type
          },
          handleClose(){
            this.dialogVisible = false;
          },
          handleConfirm(){
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                  let data = {};
                  this.btnLoading = true;
                  data.templateName = this.addForm.templateName;
                  let fn;
                  if(this.type == 'copy'){
                      fn = templateCopy;
                      data.oldTemplateId = this.addForm.templateId;
                  }else{
                      fn = addTemplate;
                      data.templateId = this.type == 'add' ? 0 :this.addForm.templateId;
                  }
                  fn(data).then((res)=>{
                    this.$message({
                      type: 'success',
                      message: '操作成功!'
                    });
                    this.btnLoading = false;
                    if(this.type == 'edit' || this.type == 'copy'){
                      this.getList();
                      this.handleClose();
                    }else{
                       this.$router.push({name:'templateItem',query:{templateName:data.templateName,templateId:res.templateId}})
                    }
                  }).catch(()=>{
                    this.btnLoading = false
                  })
                }
            })
          },
          getList(){
            this.loading = true;
            getTemplateList().then((res)=>{
                    this.list = res
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                })
            },

          changeState(item){
            changeTemplate({templateId:item.templateId,isEnable:item.isEnable == 1 ? 0 : 1}).then((res)=>{
                 this.getList();
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  });
            })
          }

        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
